<template>
  <div>
    <!-- 日期选择器 -->
    <div>
      <el-row>
        <el-col :span="21">
          <el-form-item label="请选择查询日期">
            <el-date-picker
              v-model="searchDates"
              type="daterange"
              range-separator="To"
              value-format="YYYY-MM-DD"
              start-placeholder="开始日期"
              end-placeholder="截止日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="3" style="padding-left:10px">
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <!-- 定义一个div 当做显示echarts图表的容器 -->
      <el-row>
        <el-col :span="12">
          <div ref="main1" style="width: 100%;height:400px;"></div>
        </el-col>
        <el-col :span="12">
          <div ref="main2" style="width: 100%;height:400px;"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { GetOrderStatistics } from '@/api/orderStatistics'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
const searchDates = ref([])
//1、查询统计数据
const handleSearch = async () => {
  //选中的查询的时间日期才执行查询
  if (searchDates.value && searchDates.value.length === 2) {
    const { data } = await GetOrderStatistics(
      searchDates.value[0],
      searchDates.value[1]
    )
    console.log(data)
    //点击按钮。查询数据后渲染数据到echarts中
    //每天的订单总金额
    initEcharts(
      main1.value,
      data.dates,
      data.totalAmounts,
      '每日订单金额',
      'line'
    )
    //每天的订单的成交数量
    initEcharts(main2.value, data.dates, data.totalNums, '每日订单数量', 'bar')
  } else {
    ElMessage.warning('请选择查询的时间')
  }
}
//2、echarts展示数据
const main1 = ref({})
const main2 = ref({})
const initEcharts = (chartDom, xData, xValues, subtext, type) => {
  var myChart = echarts.init(chartDom)
  var option

  option = {
    title: {
      text: '订单统计数据',
      subtext,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: xData,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: 'Direct',
        type,
        barWidth: '60%',
        data: xValues,
      },
    ],
  }

  option && myChart.setOption(option)
}
</script>
